$opc1: .3;
$opc2: 1;

@keyframes fn {
    0% {
        transform:rotateX(-6deg) rotateY(0deg);
    }

    100% {
        transform:rotateX(-6deg) rotateY(360deg);
    }
}

@keyframes change {
    0% {
        transform: rotateY(0deg);
    }

    10% {
        transform: rotateY(0deg);
    }

    20% {
        transform: rotateY(72deg);
    }

    30% {
        transform: rotateY(72deg);
    }

    /*总共用10秒，0%到30% 也是3.333秒第一张图片停留位置后面以此类推*/
    40% {
        transform: rotateY(144deg);
    }

    50% {
        transform: rotateY(144deg);
    }

    60% {
        transform: rotateY(216deg);
    }

    70% {
        transform: rotateY(216deg);
    }

    80% {
        transform: rotateY(288deg);
    }

    90% {
        transform: rotateY(288deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes card1 {
    0% {
        transform: rotateY(0deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    16.66% {
        transform: rotateY(0deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    33.33% {
        transform: rotateY(30deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    49.99% {
        transform: rotateY(30deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    66.59% {
        transform: rotateY(15deg) translateZ(300px);
        opacity: $opc2;
        z-index: 9;
    }

    83.24% {
        transform: rotateY(15deg) translateZ(300px);
        opacity: $opc2;
        z-index: 9;
    }

    100% {
        transform: rotateY(0deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }
}

@keyframes card2 {
    0% {
        transform: rotateY(30deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    16.66% {
        transform: rotateY(30deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    33.33% {
        transform: rotateY(15deg) translateZ(300px);
        opacity: $opc2;
        z-index: 9;
    }

    49.99% {
        transform: rotateY(15deg) translateZ(300px);
        opacity: $opc2;
        z-index: 9;
    }

    66.59% {
        transform: rotateY(0deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    83.24% {
        transform: rotateY(0deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    100% {
        transform: rotateY(30deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }
}

@keyframes card3 {
    0% {
        transform: rotateY(15deg) translateZ(300px);
        opacity: $opc2;
        z-index: 9;
    }

    16.66% {
        transform: rotateY(15deg) translateZ(300px);
        opacity: $opc2;
        z-index: 9;
    }

    33.33% {
        transform: rotateY(0deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    49.99% {
        transform: rotateY(0deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    66.59% {
        transform: rotateY(30deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    83.24% {
        transform: rotateY(30deg) translateZ(300px);
        opacity: $opc1;
        z-index: 0;
    }

    100% {
        transform: rotateY(15deg) translateZ(300px);
        opacity: $opc2;
        z-index: 9;
    }
}

@keyframes big{
    0%{
        background-size: 40%;
        transform:rotate(360deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
    }
    50%{
        background-size: 30%;
        transform:rotate(0deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
    }
    100%{
        background-size: 40%;
        transform:rotate(360deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
    }
}